<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>损坏类型子参照表浏览</title>
    <link rel="icon" href="../../img/icon.png">
    <link href="../../CSS/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link href="../../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../CSS/animate.css" rel="stylesheet">
    <link href="../../CSS/style.css" rel="stylesheet">
    <script src="../../JS/jquery-2.1.1.js"></script>
    <script src="../../JS/bootstrap.min.js"></script>
    <script src="../../JS/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="../../JS/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../../JS/inspinia.js"></script>
    <script src="../../JS/plugins/pace/pace.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        $(function () {
            var login=sessionStorage.getItem('Islogin');
            if(login!=1){
                if(confirm("未登陆,请先登陆")){
                    window.location.href='../../login.html';
                }
            }else {
                var obj = {
                    url: "http://localhost:8080/damageTypeF/findAll",
                    type: "post",
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        // var data=JSON.stringify(result[i]);
                        showData(result);
                    }
                    // error:function (e) {
                    //     alert("请求失败"+e.toString())
                    // }
                };
                $.ajax(obj);
            }
        })
        function  showData(result) {
            for(var i in result){
                var str="<option value='"+result[i].damage_type_fname+"'>"+result[i].damage_type_fname+"</option>";
                $("#damage_type_fname").append(str);
            }
        }

    </script>
</head>
<body>
    <div id="wrapper">
        <!--左边菜单栏-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <span>
                                <img alt="image" width="50px" height="50px" class="img-circle"
                                    src="../../img/head.jpg" />
                            </span>
                            <a data-toggle="dropdown" class="dropdown-toggle">
                                <span class="clear"><span class="block m-t-xs"><strong class="font-bold">组长:张宁</strong>
                                    </span><span class="text-muted text-xs block">组员<b class="caret"></b></span></span>
                            </a>
                            <ul style="text-align: center" class="dropdown-menu animated fadeInRight m-t-xs">
                                <li>王秋红</li>
                                <li>周彦西</li>
                                <li>王嘉伟</li>
                                <!--<li class="divider"></li>-->
                            </ul>
                        </div>
                        <div class="logo-element">
                            IN+
                        </div>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">职工信息管理</span> <span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../employee/employee.html"> 职工表</a></li>
                            <li><a href="../employeeType/employeeType.html">职工种类</a></li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> </i> <span class="nav-label">道路信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../roadBasic/roadBasic.html">道路基本信息表</a></li>
                            <li><a href="../roadwayType/roadwayType.html">车行道分类表</a></li>
                            <li><a href="../roadway/roadway.html">车行道信息表</a></li>
                            <li><a href="../roadType/roadType.html">路面类型表</a></li>
                            <li><a href="../ancillaryFacilities/ancillaryFacilities.html">附属设施表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i><span class="nav-label">损害类型信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../damageTypeS/damageTypeStable.html">损害类型子参照表</a></li>
                            <li><a href="../damageTypeF/damageTypeFtable.html">损害类型父参照表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">评定等级信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../evaluateGrade/evaluateGrade.html">评定等级表</a></li>
                            <li><a href="../ratingJudge/ratingJudge.html">评定等级判断表</a></li>
                            <li><a href="../evaluateIndex/evaluateIndex.html">评定指标表</a></li>
                            <li><a href="../damageSingle/damageSingle.html">路面损害单项扣分表</a><li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">日常巡查信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../roadPatrol/roadPatrol.html">道路日常巡查记录表</a></li>
                            <li><a href="../damageSingle/damageSingle.html">设施损坏通知单</a><li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">定期检查信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../pavementFlatness/pavementFlatness.html">平整度检测记录表</a></li>
                            <li><a href="../roadDamage/raodDamage.html">路面损害情况记录表</a><li>
                            <li><a href="../pavementDamage/pavementDamage.html">路面损害调查表</a><li></li>
                            <li><a href="../roadTechnicalEvaluate/roadTechnicalEvaluate.html">道路技术状况评估结果表</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <!--右边界面框-->
        <div id="page-wrapper" class="gray-bg">
            <!--head-->
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i
                                class="fa fa-bars"></i></a>
                        <form role="search" class="navbar-form-custom" action="#">
                            <div class="form-group">
                                <input type="text" placeholder="Search for something..." class="form-control"
                                    name="top-search" id="top-search">
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li>
                            <span class="m-r-sm text-muted welcome-message">欢迎使用道路养护管理系统</span>
                        </li>
                        <li>
                            <a href="../../login.html">
                                <i class="fa fa-sign-out"></i> 退出登录
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

        <!--主界面-->
        <div style="margin-top: 30px" class="layui-container">

            <h1 style="text-align: center;margin-bottom: 30px">损坏类型子参照列表</h1>

            <div style="margin: auto" class="layui-container">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>

            <div style="margin: 20px 20% ; display: none" id="formDemo">
                <form id="employeeAdd" class="layui-form">
                    <div class="layui-form-item">
                        <label>损害类型名称</label>
                        <input type="text" style="width: 300px" name="damage_type_sname" lay-verify="required" lay-reqtext="损害类型子名称不能为空" placeholder="损害类型子名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label>损坏形状</label>
                        <input style="width: 300px" type="text" name="damage_type_shape"  lay-verify="required" lay-reqtext="损害形状不能为空" placeholder="损害形状" class="layui-input" autocomplete="off" >
                    </div>
                    <div class="layui-form-item">
                        <label>计算方法</label>
                        <input style="width: 300px" type="text" name="damage_type_calcu" lay-verify="required" lay-reqtext="计算方法不能为空" placeholder="计算方法" class="layui-input" autocomplete="off" >
                    </div>
                    <div class="layui-inline">
                        <label>损害类型父名称</label>
                        <select id="damage_type_fname" name="damage_type_fname" lay-verify="required" lay-search="" autocomplete="off" >
                        </select>
                    </div>
                    <div style="margin-top:20px;margin-left: 80px" class="layui-form-item">
                        <div>
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="Add">添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>

            <!--序列-->
            <script type="text/html" id="zizeng">
                {{d.LAY_TABLE_INDEX+1}}
            </script>

            <!--头部工具-->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button data-method="offset" data-type="auto"  class="layui-btn layui-btn-sm" lay-event="add">添加数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="deleteAll">删除选中</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                </div>
            </script>

            <!--操作框-->
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script>
                layui.use(['table','jquery','layer','form'],function () {
                    var table = layui.table;
                    var layer = layui.layer;
                    var $=layui.jquery;
                    var form=layui.form;

                    table.render({
                        elem: '#test'
                        ,url:'http://localhost:8080/damageTypeS/findByPage'
                        ,cellMinWidth: 80
                        ,page: true
                        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                            title: '提示'
                            ,layEvent: 'LAYTABLE_TIPS'
                            ,icon: 'layui-icon-tips'
                        }]
                        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                        ,cols: [[
                            {type: 'checkbox', fixed: 'left'}
                            ,{field:'zizeng',title: '序列',fixed: 'left',templet:'#zizeng',align:'center'}
                            ,{field:'damage_type_sid',title: '损坏类型子编号',hide:true,align:'center'}
                            , { field: 'damage_type_sname',edit:true,title: '损害类型子名称',  totalRow: true ,align:'center'}
                            , { field: 'damage_type_shape',edit:true,title: '损坏形状',  totalRow: true ,align:'center'}
                            , { field: 'damage_type_calcu',edit:true,title: '计算方法',  totalRow: true ,align:'center'}
                            , { field: 'damage_type_fname',edit:true,title: '损害类型父名称',  totalRow: true ,align:'center'}
                            ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center',width:200}
                        ]]
                    });

                    //头工具栏事件
                    table.on('toolbar(test)', function(obj){
                        var checkStatus = table.checkStatus(obj.config.id);
                        switch(obj.event){
                            case 'add':
                                add();
                                break;
                            case 'getCheckLength':
                                var data = checkStatus.data;
                                layer.msg('选中了：'+ data.length + ' 个');
                                break;
                            case 'isAll':
                                layer.msg(checkStatus.isAll ? '全选': '未全选');
                                break;
                            case 'deleteAll':
                                // if(checkStatus.data != null) {
                                //     layer.confirm('你确定要删除选中信息吗？', function (index) {
                                //         for(var i=0;i<checkStatus.data.length;i++) {
                                //             $.ajax({
                                //                 type: "POST",
                                //                 url: "http://localhost:8080/employeeType/delete?id=" + checkStatus.data[i].employee_type_id,
                                //                 success: function (data) {
                                //
                                //                 }
                                //                 // error:function (e) {
                                //                 //     alert("请求失败"+e.toString())
                                //                 // }
                                //             });
                                //         }
                                //         location.reload();
                                //     });
                                // }
                                layer.alert('待开放功能');
                                break;

                            //自定义头工具栏右侧图标 - 提示
                            case 'LAYTABLE_TIPS':
                                layer.alert('待开放功能');
                                break;
                        };
                    });

                    //监听行工具事件
                    table.on('tool(test)', function(obj){
                        var data = obj.data;
                        //console.log(obj)
                        if(obj.event === 'del'){
                            layer.confirm('你确定要删除此信息吗？', function(index){
                                $.ajax({
                                    type: "POST",
                                    url: "http://localhost:8080/damageTypeS/delete?id="+data.damage_type_sid,
                                    success: function(data) {
                                        obj.del();
                                        layer.close(index);
                                    }
                                    // error:function (e) {
                                    //     alert("请求失败"+e.toString())
                                    // }
                                })
                            });
                        }else if(obj.event==="detail"){
                            layer.alert(JSON.stringify(data));
                        }else if(obj.event==="edit"){

                        }
                    });

                    //监听单元格编辑
                    table.on('edit(test)', function(obj){
                        var value = obj.value //得到修改后的值
                            ,data = obj.data; //得到所在行所有键值
                        $.ajax({
                            type: "POST",
                            url: "http://localhost:8080/damageTypeS/change",
                            data:data,
                            success: function(success) {
                                layer.msg(' 字段更改为：'+ value);
                            }
                            // error:function (e) {
                            //     alert("请求失败"+e.toString())
                            // }
                        });
                    });

                    function add() {
                        layer.open({
                            type: 1
                            ,area:['500px','600px']
                            ,title:'信息添加'
                            ,offset: 'auto'//具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                            ,id: 'layerDemo' //防止重复弹出
                            ,scrollbar: false // 父页面 滚动条 禁止
                            ,content: $("#formDemo")
                            ,resize:false
                        });
                        //监听提交
                        form.on('submit(Add)', function(data){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost:8080/damageTypeS/add",
                                data: $('#employeeAdd').serialize(),
                                success: function(result) {

                                }
                            });
                        });
                    };
                });
            </script>

        </div>

    </div>

</div>
</body>
</html>